<template>
  <div>
    <div>插值表达式：{{ $store.state.count }}</div>
    <div>计算属性：{{ count }}</div>
    <button @click="addCount(1)">+1</button>
    <button @click="AddAsyncCount">Async+10</button>
    <button @click="getAsyncCount(100)">(辅助)Async+100</button>
    <!-- getters -->
    <div>原始形式：{{ $store.getters.filterList }}</div>
    <div>辅助形式：{{ filterList }}</div>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {
  name: "BasicApiThirteen",
  methods: {
    //   原始形式
    //   addCount () {
    //       // commit(mutation名称, 载荷)
    //      this.$store.commit("addCount", 10)  // 提交mutations
    //   },
    ...mapMutations(['addCount']),
    AddAsyncCount() {
      // 原始形式 调用action
      this.$store.dispatch('getAsyncCount', 10)
    },
    ...mapActions(['getAsyncCount'])
  },
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    ...mapState(['count']),
    ...mapGetters(['filterList'])
  }
}
</script>

<style scoped>

</style>
